<template>
  <div class="h-full home-map">
    <TwinPlayer
      ref="twinPlayerRef"
      @click="handleClickDevice"
      @marker2build="handleClickMarker2Build"
      @roam2marker2build="handleClickRoam2Marker2Build"
      @roam-modal-close="handleRoamModalClose"
      @roam-end="handleRoamEnd"
    />

    <Aside></Aside>

    <Article
      ref="ArticleRef"
      @reset="handleReset"
      @roam="handleRoam"
      @camera="handleCamera"
      @device="handleDevice"
      @changeLabel="handleChangeLabel"
      @pause="handlePause"
      @begin="handleBegin"
      @close-all-modal="handleCloseAllModal"
    ></Article>

    <!-- 视频装置-摄像机详情 -->
    <CameraModal ref="CameraModalRef" />

    <!-- 设备台账-设备详情 -->
    <DeviceModal ref="DeviceModalRef" />

    <!-- 设备详情 -->
    <DeviceDialog ref="DeviceDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Aside from './Aside.vue'
import Article from './Article.vue'
import CameraModal from './CameraModal.vue' // 摄像机弹窗
import DeviceModal from './DeviceModal.vue' // 设备台账弹窗
import DeviceDialog from './DeviceDialog.vue' // 设备详情弹窗

import TwinPlayer from '@/components/TwinPlayer/index.vue'
import { patrolJobMultiTerminal, queryType } from './serve.api'

const taskList = ref<any[]>([])
const twinPlayerRef = ref()

const ArticleRef = ref()
const CameraModalRef = ref()
const DeviceModalRef = ref()
const DeviceDialogRef = ref()

// 重置视场角
function handleReset() {
  twinPlayerRef.value.resetAngle()
  ArticleRef.value.resetAngle()
}

// 执行漫游
function handleRoam(data: any) {
  twinPlayerRef.value.roaming(data)
}

function handleChangeLabel(data: any) {
  console.log(data, '标签信息')
  if (data.isOpen === 1) {
    twinPlayerRef.value.show(data.rootDirectoryId)
  }
  if (data.isOpen === 0) {
    twinPlayerRef.value.hide(data.rootDirectoryId)
  }
}

async function handleCamera(data: any) {
  console.log(data, '---------摄像机信息---------')
  // 默认跳转到视场角
  // twinPlayerRef.value.defaultAngle(data.tagId, data.modelCameraId)
  twinPlayerRef.value.toDevAngle(data.modelCameraId, 1)
}

function handleDevice(data: any) {
  console.log(data, '---------设备信息---------')
  // 进入设备默认视场角
  // twinPlayerRef.value.defaultAngle(data.tagId, data.id)
  twinPlayerRef.value.toDevAngle(data.id)
}

// 点击标签&设备
function handleClickMarker2Build(id: string) {
  if (id.indexOf('DX_') === -1) {
    queryType(id).then((ress) => {
      console.log(ress, '---ress---')
      if (!ress) return
      const { tagType, deviceId } = ress

      twinPlayerRef.value.stopHighlightActor()
      twinPlayerRef.value.highlightActor(deviceId)
      switch (tagType) {
        case 0: // 设备
          DeviceModalRef.value.showModal(id)
          CameraModalRef.value.close()
          break
        case 1: // 摄像机
          CameraModalRef.value.showModal(id)
          DeviceModalRef.value.close()
          DeviceDialogRef.value.close()
          break
        default:
          break
      }
    })
  }
}

// 漫游结束
function handleRoamEnd() {
  ArticleRef.value.roamEnd()
}

// 点击设备(获取设备信息)
function handleClickDevice(id: string) {
  DeviceDialogRef.value.showModal(id)
}

function handleClickRoam2Marker2Build(id: string) {
  DeviceDialogRef.value.showModal(id)
}

function handleRoamModalClose() {
  DeviceDialogRef.value.close()
}

function handleCloseAllModal() {
  CameraModalRef.value.close()
  DeviceModalRef.value.close()
  DeviceDialogRef.value.close()
}

function handlePause() {
  console.log('暂停')
  twinPlayerRef.value.pause()
}

function handleBegin() {
  console.log('继续')
  twinPlayerRef.value.begin()
}

onMounted(async () => {
  taskList.value = await patrolJobMultiTerminal()
})
</script>

<style lang="less" scoped>
.home-map {
  position: relative;
  width: 100%;
  height: 100%;

  .box {
    position: absolute;
    right: 3rem;
    bottom: 3rem;
    display: flex;
    align-items: center;
    width: 3rem;
    height: 3rem;
    background-color: #fff;
    border-radius: 0.5rem;

    img {
      margin: auto;
      width: 1.5rem;
      cursor: pointer;
    }

    .box-content {
      position: absolute;
      top: -2.5rem;
      right: 3rem;
      width: 15rem;
    }
  }
}
</style>
